/*
参数说明：
alertShow-弹出框参数{
showmsg-服务器弹窗提示
msg-服务器提示内容
}
components-商品组件信息{
searchShoplist-搜索有结果时显示的商品数组
isMoney-是否显示金钱占位
isScore-是否显示积分占位
isRemove-是否显示购买按钮占位
divsize-组件一排显示几个数据
biaoqian-跳转积分详情还是商品详情界面(1 积分兑换界面  2 商品详情界面)
}
searchData-搜索接口参数{
valueName-搜索框输入的内容
order-排序规则1 销量高到低 2 价格低到高 3价格高到低
currentPage-当前页
pageSize-一页显示多少数据
pages-总页数
currentPage=pages就是最后一页
}
nottext-搜索无结果时显示的text内容Type
SearchShow-搜索有结果时显示的内容块Type
checklist-搜索无结果时和初始化进入时显示的热门推荐商品数组
pullupConfig2-上拉手势显示的内容
shopHeigth-滚动条刷新窗口动态高度设置

results-搜索框历史记录
value-如果有搜索记录框点击的哪一条的val
priceItemType-控制价格是从低到高还是从高到底 3 为从高到低 2从低到高
shopType-商品1 还是服务2
方法：
getSearchList-初始化方法获得热门推荐List数组
resultClick-搜索框方法体
load2-上拉刷新方法
searchMainfn-搜索取消条件回复默认初始状态
onShow-弹窗框弹出时触发的方法
onHide-弹窗框关闭时触发的方法
getResult-历史记录方法体(暂时没用)
*/
<template>
  <div>
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <!--<search @click.native="onFocus" @result-click="resultClick" @on-submit="resultClick" placeholder="搜索喜欢的宝贝" @on-cancel="searchMainfn" @on-change="getResult"  v-model="value" position="absolute" auto-scroll-to-top ></search>-->
    <!--<div v-if="remenType" id="remenType" style="height: 44px"></div>-->
    <!--<div v-if="nottext === true" style="color: #c8c9ca;text-align: center;padding-top: 49px;font-size: 12px">-->
      <!--<h4>抱歉,暂无与此相关的商品</h4>-->
      <!--<h4>以下是我们为您挑选的商品</h4>-->
    <!--</div>-->
    <!--<group gutter="10" :title="'┃热门推荐'" v-if="SearchShow === false" style="padding-left: 20px;margin-right: 20px;padding-top: 18px">-->
      <!--<card v-for="item in checklist">-->
        <!--<img @click="shopinfoFn(item)" slot="header" :src="item.imgUrl" style="width:100%;display:block;">-->
      <!--</card>-->
    <!--</group>-->
    <div>
      <button-tab style="padding-bottom: 5px">
        <button-tab-item @click.native="searchShopItemfn(1)" selected>热门</button-tab-item>
        <button-tab-item v-if ='priceItemType===2' @click.native="searchShopItemfn(2)">价格<img src="../../../../src/assets/images/shopMall/pricelow.png" width="12px" height="12px"></button-tab-item>
        <button-tab-item v-if ='priceItemType===3' @click.native="searchShopItemfn(3)">价格<img src="../../../../src/assets/images/shopMall/pricehigh.png" width="12px" height="12px"></button-tab-item>
      </button-tab>
      <scroller v-model="itemScrollerStatus" lock-x scrollbar-y :bounce="true" :use-pullup="true" :pullup-config="pullupConfig2" height="-78" ref="demo2" @on-pullup-loading="load2">
        <div class="box2">
          <flexbox :gutter="0" wrap="wrap" style="padding-bottom: 30px">
            <flexbox-item :span="6" v-for="item in components.searchShoplist" style="padding-top: 5px">
              <div class="flex-demo">
                <div style="margin: 0 5px 5px;border: 1px solid #f1f7ff;">
                  <div @click="shopinfoFn(item)">
                    <div>
                      <img :src="item.url" width="100%" >
                    </div>
                    <div style="height: 40px">
                      <h5 style="padding-left: 5px;padding-right: 5px;font-size: 11px;color: #636363">{{item.name}}</h5>
                    </div>
                  </div>
                  <div>
                    <flexbox :gutter="0" wrap="nowrap">
                      <flexbox-item :span="12">
                        <p style="font-size: 16px;text-align:left;color: #fa0000;display: inline-block">￥{{item.nowPrice}}</p>
                        <p v-if="shopType===1" style="font-size: 12px;text-decoration: line-through;text-align: left;color: #999999;display: inline-block">￥{{item.oldPrice}}</p>
                      </flexbox-item>
                    </flexbox>
                  </div>
                </div>
              </div>
            </flexbox-item>
          </flexbox>
        </div>
      </scroller>
    </div>
  </div>
</template>
<script>
  import { Group, XButton, ButtonTab, ButtonTabItem, Alert, Card, Scroller, Masker, Flexbox, FlexboxItem, XImg } from 'vux'
  import shopGood from '../../../components/shopCommodity/shopGoods_Q.vue'
  import * as urls from '../../../api/urls'

  export default {
    components: {
      Group,
      XButton,
      shopGood,
      ButtonTab,
      ButtonTabItem,
      Alert,
      Card,
      Scroller,
      Masker,
      Flexbox,
      FlexboxItem,
      XImg
    },
    mounted: function () {
      this.shopType = this.$route.query.shopType
      // 可见窗口高度
      let clientHeight = parseInt(document.body.clientHeight)
      // 搜索栏高度
      let timeIdHeight = 32
      // 底部菜单高度
      let bottomHeight = 50
      this.shopHeigth = (clientHeight - timeIdHeight - bottomHeight) + 'px'
      this.searchShopItemfn(1)
      this.weixinfn32()
    },
    data () {
      return {
        isMasker: true,
        alertShow: {
          showmsg: false,
          msg: ''
        },
        components: {
          searchShoplist: []
        },
        itemScrollerStatus: {
          pulldownStatus: 'disabled',
          pullupStatus: 'default'
        },
        pullupConfig2: {
          content: '上拉刷新',
          pullUpHeight: 60,
          height: 40,
          autoRefresh: false,
          downContent: '放开刷新',
          upContent: '上拉刷新',
          loadingContent: '加载中......',
          clsPrefix: 'xs-plugin-pullup-'
        },
        arrList: [],
        checklist: [],
        shopHeigth: '',
        searchData: {
          valueName: '',
          currentPage: '1',
          pageSize: '4',
          order: '',
          pages: ''
        },
        results: ['历史记录'],
        value: '',
        shopType: '',
        priceItemType: 2
      }
    },
    methods: {
      weixinfn32 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      },
      shopinfoFn (item) {
        window.localStorage.setItem('shopId', item.shopId)
        let userId = this.$store.state.userInfo.id
        window.localStorage.setItem('userId', userId)
        this.$router.push({
          path: '/ShopInfo'
        })
        this.$router.go(1)
      },
//      paixu (order) {
//        let that = this
//        let arry = this.components.searchShoplist
//        if (order === 1) {
//          that.components.searchShoplist = []
//          that.priceItemType = 2
//          for (var t = 0; t < that.arrList.length; t++) {
//            that.components.searchShoplist.push(that.arrList[t])
//          }
//        } else if (order === 2) {
//          // 2的时候 价格由高到低
//          var temp
//          for (var i = 0; i < arry.length; i++) {
//            for (var j = 0; j < arry.length - i - 1; j++) {
//              if (arry[j].nowPrice > arry[j + 1].nowPrice) {
//                temp = arry[j]
//                arry[j] = arry[j + 1]
//                arry[j + 1] = temp
//              }
//            }
//          }
//          that.components.searchShoplist = arry
//          that.priceItemType = 3
//        } else if (order === 3) {
//          // 3的时候 价格由低到高
//          var temp2
//          for (var k = 0; k < arry.length; k++) {
//            for (var s = 0; s < arry.length - k - 1; s++) {
//              if (arry[s].nowPrice < arry[s + 1].nowPrice) {
//                temp2 = arry[s]
//                arry[s] = arry[s + 1]
//                arry[s + 1] = temp2
//              }
//            }
//          }
//          that.components.searchShoplist = arry
//          that.priceItemType = 2
//        }
//      },
      searchShopItemfn (order) {
        let that = this
        let numberPage = 1
        that.searchData.order = order
        if (order === 1) {
          that.priceItemType = 2
        } else if (order === 2) {
          that.priceItemType = 3
        } else if (order === 3) {
          that.priceItemType = 2
        }
        let seiz = (this.searchData.currentPage) * (this.searchData.pageSize)
        this.http(urls.shopSearch, {type: this.shopType, key: '', order: that.searchData.order, currentPage: numberPage, pageSize: seiz}, function (res) {
          if (res.status === 100) {
            if (res.data.list.pages !== 0) {
              that.components.searchShoplist = []
              for (let i = 0; i < res.data.list.list.length; i++) {
                let itemObj = {}
                itemObj.url = res.data.list.list[i].imgUrl
                itemObj.name = res.data.list.list[i].name
                itemObj.shopId = res.data.list.list[i].itemId
                itemObj.nowPrice = res.data.list.list[i].nowPrice
                itemObj.oldPrice = res.data.list.list[i].oldPrice
                that.components.searchShoplist.push(itemObj)
                that.arrList.push(itemObj)
              }
              that.searchData.pages = res.data.list.pages
              if (numberPage === res.data.list.pages) {
                that.$refs.demo2.disablePullup()
              }
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      load2 () {
        // 下拉刷新如果搜索出来就一页那就关闭刷新功能
        let that = this
        let currentPage = parseInt(that.searchData.currentPage) + 1
        that.searchData.currentPage = currentPage
        that.http(urls.shopSearch, {type: this.shopType, key: '', order: that.searchData.order, currentPage: that.searchData.currentPage, pageSize: that.searchData.pageSize}, function (res) {
          if (res.status === 100) {
            if (res.data.list.pages !== 0) {
              that.searchData.pages = res.data.list.pages
              for (let i = 0; i < res.data.list.list.length; i++) {
                let itemObj = {}
                itemObj.url = res.data.list.list[i].imgUrl
                itemObj.name = res.data.list.list[i].name
                itemObj.shopId = res.data.list.list[i].itemId
                itemObj.nowPrice = res.data.list.list[i].nowPrice
                itemObj.oldPrice = res.data.list.list[i].oldPrice
                that.components.searchShoplist.push(itemObj)
                that.arrList.push(itemObj)
              }
              if (that.searchData.currentPage >= that.searchData.pages) {
                that.itemScrollerStatus.pullupStatus = 'disabled'
              } else {
                that.itemScrollerStatus.pullupStatus = 'default'
              }
              let that2 = that
              that.$nextTick(function () {
                if (that2.$refs.demo2 !== undefined) {
                  that2.$refs.demo2.reset()
                }
              })
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      }
    }
  }
</script>
<style scoped="scoped">
</style>
